<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>任务八:响应式网格（栅格化）布局</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="row">
	<div class="col-md-4 col-sm-6">
		<div class="content"></div>
	</div>
	<div class="col-md-4 col-sm-6">
		<div class="content"></div>
	</div>
	<div class="col-md-4 col-sm-12">
		<div class="content"></div>
	</div>
	<!-- 二行 -->
	<div class="col-md-3 col-sm-3">
		<div class="content"></div>
	</div>
	<div class="col-md-6 col-sm-6">
		<div class="content"></div>
	</div>
	<div class="col-md-3 col-sm-3">
		<div class="content"></div>
	</div>
	<!-- 三行 -->
	<div class="col-md-1 col-sm-2">
		<div class="content"></div>
	</div>
	<div class="col-md-1 col-sm-2">
		<div class="content"></div>
	</div>
	<div class="col-md-2 col-sm-8">
		<div class="content"></div>
	</div>
	<div class="col-md-2 col-sm-3">
		<div class="content"></div>
	</div>
	<div class="col-md-6 col-sm-3">
		<div class="content"></div>
	</div>
</div>
</body>
</html>